import React from "react";
import './index.css';
import ProductCard from "../../../../../Component/ProductCard";
import {Button,Input} from "antd";
import PriceTag from "../../../../../Component/PriceTag";
import BGUtil from "../../../../../utils/BGUtil"
// import IFrameUtil from "../../../../../utils/IFrameUtil";
import MessageUtil from "../../../../../utils/MessageUtil";
import RedStar from "../../../../../Component/RedStar"
import Protrait from "../../../../../Component/Protrait";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();
        this.state={
            hired:props.hired,
            text:"hello",
            sellerName:"ives",
            seled:false
        }
        BGUtil.InitBG();
        // IFrameUtil.UpdateIframeHeight();
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    render(){
        return(
            <div className="HireServiceOrderDetail_Container Courseware_Body">
                <div className="HireServiceOrderDetail">
                    <ProductCard
                        title={"Product title"}
                        subtitle={["品牌：大疆", "类型：四周飞行","型号：ZENMUSAKD","sn号：7315 059 4549"]}
                        badge={[
                            <img alt="Insurance" src="/assets/Good/Insurance.png"/>,
                            <img alt="GuaranteeMoney" src="/assets/Good/GuaranteeMoney.png"/>
                        ]}
                        priceText={<PriceTag currency={"￥"} price={"998"} unit={"天"}/>}
                    />
                </div>
                <div className="Courseware_Body HireServiceOrderDetail">
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">押金</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">租赁日期</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">租赁天数</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Margin">
                        <RedStar/>
                        <span>请仔细填写您的个人信息，验证完成后不可修改</span>
                    </div>
                </div>
                <div className="Courseware_Body HireServiceOrderDetail">
                    <div style={{marginBottom:"0.5rem"}}>
                        <Protrait src={this.testLogo}/>
                        <span className="HireServiceDetail_User_Name">{this.state.sellerName}</span>
                    </div>

                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">产品服务</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="派验机/无附属服务（卖家选择）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">配送服务</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="包邮" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">运费险</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="确认收货前退货可赔" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">订单备注</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="选填，请先和卖家协商一致" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                </div>
                <div className="Courseware_Body HireServiceOrderDetail">
                    <div className=" UserInfo_Down_Input">
                        <span className="Down_Input_Title">代金券</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="（只能设置一次）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                </div>
                <div className="UserInfo_Down_Margin">
                        共计:￥4544元
                </div>
                <div className="HireServiceDetail_Bottom">
                        <a href="/trade/hireServicePayDetail" alt="pay">
                            <Button style={{width:"12rem"}} type="primary" shape="round" size="large">
                                提交订单
                            </Button>
                        </a>
                    </div>
            </div>
        )
    }
}